<template>
	<view>
		<!-- 链接展示 -->
		<view v-if="videoDetail.uploadType=='1'">
			<web-view :src="videoDetail.videoUrl"></web-view>
		</view>
		<!-- 视频展示 -->
		<view class="box" v-else>
			<!-- 			<video :src="videoDetail.videoUrl" id="myVideo" @timeupdate="timeUpdate" initial-time="initial_time"
				@ended="showPractice"></video> -->
			<view style="width: 100%; height: 442rpx;">
				<pb-video :videoConf="videoConf" id="myVideo" secret="yowf0eJNfP0WkjGG2WdaahszK6cjezCi"
					initial-time="initial_time" @timeupdate="timeUpdate" @ended="showPractice" />
			</view>
			<!-- 视频信息开始 -->
			<view class="detail-box">
				<view class="brief">
					<view class="title">
						{{videoDetail.topicTitle}}
					</view>
					<view class="subhead">
						{{videoDetail.subTitle}}
					</view>
					<view class="doctor">
						<view class="doctor-name">
							医生: {{videoDetail.doctorName}}
						</view>
						<view class="category">
							类别:{{videoDetail.categoryName}}
						</view>
					</view>
				</view>
				<!-- 视频信息结束 -->

				<!-- 开始答题 -->
				<view class="btn flex fcenter" @click="toTestPaper" v-if="videoDetail.score===null"
					:disabled="!videoDetail.videoStatus">开始答题</view>
				<view class="btn flex fcenter" v-else @click="toAnalysis">查看答案</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AnswerKeys from 'components/AnswerKeys.vue'
	import {
		getVideoDetailApi
	} from '../../common/api/lectureApi.js'
	//根据后台返回数据: 视频的是否观看, 题目的是否做过, 
	export default {
		components: {
			AnswerKeys
		},
		data() {
			return {
				video_real_time: 0,
				initial_time: '',
				showTest: false,
				doctor: '',
				detailText: '',
				videoDetail: {},
				subjectCode: 0,
				videoConf: {
					width: '100%',
					height: '442rpx',
					showCenterPlayBtn: true,
					ShowMuteBtn: true,
					showProgress: false,
					url: ''
				},
				timer: null,
				startTime: false
			};
		},
		onLoad(option) {
			// this.videoDetail = JSON.parse(option.item)
			console.log(option)
			if (option.code) {
				this.subjectCode = option.code
			} else {
				this.subjectCode = option.subjectCode
			}
			
		},
		methods: {
			// 计时器 视频为链接，拿到视频时长，开始计时，结束后跳转答题页面
			timingFunc(time) {
				let count = 0
				let _that = this
				_that.timer = setInterval(async function() {
					count++;
					// console.log('定时器执行了' + count + '次')
					if(count >= time) {
						clearInterval(_that.timer)
						_that.timer = null
						console.log('定时器已停止',_that.videoDetail)
						// _that.startTime = true
						//播放完毕,传递视频观看完毕的状态到后端
						const r = await uni.$http.post('/api/subject/result/updateSubjectResult', {
							"subjectCode": _that.videoDetail.subjectCode,
							"videoStatus": 1,
						})
						console.log(r,'修改状态')
						if(r.data.status == 200) {
							console.log('跳转答题页')
							_that.toTestPaper()
						}
					}
				}, 1000); //设置定时器
			},
			// 禁止拖动进度条快进
			timeUpdate: function(e) {},
			async showPractice() {
				//播放完毕,传递视频观看完毕的状态到后端
				const r = await uni.$http.post('/api/subject/result/updateSubjectResult', {
					"subjectCode": this.videoDetail.subjectCode,
					"videoStatus": 1,
				})
				this.getVideoDetail(this.subjectCode)
			},
			//跳转试卷页
			toTestPaper() {
				if (!this.videoDetail.videoStatus) {
					return uni.$showToast('请先观看完视频')
				}
				//判断视频是否看完
				uni.navigateTo({
					//需传递相关参数
					url: `/subpkg/testPaper/testPaper?subjectCode=${this.videoDetail.subjectCode}&topicTitle=${this.videoDetail.topicTitle}`
				})
			},
			toAnalysis() {
				wx.navigateTo({
					url: `/subpkg/analysis/analysis?subjectCode=${this.videoDetail.subjectCode}&topicTitle=${this.videoDetail.topicTitle}`
				})
			},
			async getVideoDetail(subjectCode) {
				console.log(subjectCode,'subjectCode')
				const res = await getVideoDetailApi(subjectCode)
				this.videoDetail = res.data
				this.videoConf.url = res.data.videoUrl
				this.videoConf.showProgress = res.data.videoStatus
				// 首页跳转开始计时
				if(!this.timer) {
					this.timingFunc(Number(res.data.videoDuration) + 5)
				}
			},
		},
		onShow() {
			this.getVideoDetail(this.subjectCode)
		},
		onUnload() {
			console.log('关闭定时器')
			// this.startTime = true
			if(this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss">
	.btn{
		margin:20rpx 0;
		background: #3FBEBB;
		color: #fff;
		border-radius: 37rpx;
		height: 80rpx;
	}
	.box {
		width: 100%;

		.title {
			font-size: 40rpx;
			font-weight: 700;
			margin: 20rpx 0;
		}

		.subhead {
			margin: 20rpx 0;
		}

		.doctor {
			display: flex;
			justify-content: space-between;
		}

		video {
			width: 100%;
		}
	}

	.detail-box {
		padding: 0 15rpx;
	}
</style>
